/*! imlooke.com */
html, body {
  margin: 0px;
  height: 100%;
  width: 100%;
  background-color: #f5f8fa;
  fontFamily: 'Roboto, Microsoft YaHei, Helvetica, Arial, sans-serif';
}

a {
  text-decoration: none;
  font-size: 14px;
  color: #3F51B5;
}

a:hover,
a:focus {
  color: #3F51B5;
  text-decoration: none;
}

p {
  font-size: 14px;
}

#app {
  height: 100%;
  width: 100%
}

.header {
  position: fixed;
  width: 100%;
  z-index: 200;
}

.main-content {
  flex: 1 0 auto;
  display: flex;
  margin-top: 64px;
  z-index: 100;
}
.reset-pw {
  color: inherit !important;
}
.reset-pw:focus {
  color: inherit !important;
}

.profile-box-width {
  width: 256px;
}

.card {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px !important; 
}

.home-content-center {
  margin-top: 160px;
}

.home-content-right {
  margin-top: 224px;
}

.tab {
  background-color: transparent;
}

.cardEditBtn {
  width: 48px !important;
  min-width: 48px !important;
}

.add {
  position: absolute;
  top: -72px;
  left: 8px;
  right: 8px;
}

.home-container {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

@media (min-width: 768px) {
  .waterfall {
    width: 550px;
  }
  .home-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (min-width: 992px) {
  .waterfall {
    width: 825px;
  }
  .home-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (min-width: 1200px) {
  .waterfall {
    width: 1100px;
  }
  .home-container {
    padding-left: 168px !important;
    padding-right: 168px !important;
  }
}

.help-url {
  color: rgba(0,0,0,0.4);
}

.help-url:hover {
  color: rgba(0,0,0,0.6);
  text-decoration: none;
}

.list-badge {
  display: block;
  width: 100%;
}

.list-badge > span {
  float: right;
  color: #ffb74d;
}

.info {
  position: absolute;
  top: 0px;
  left: 0px;
}

.welcome-a-left {
  position: absolute;
  bottom: 12px;
  left: 12px;
}

.welcome-a-right {
  position: absolute;
  bottom: 12px;
  right: 12px;
}

.welcome-a {
  color: #fff;
}

.welcome-a:hover,
.welcome-a:focus {
  color: #fff;
  text-decoration: none;
}

.info-page {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  z-index: 100;
  -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
      -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
          transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);  
}

.info-page.expend {
  width:3600px;
  height:3600px;
  top: -1680px;
  left: -1695px;
  -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
      -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
          transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);   
}

.info-page-content {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
  margin-top: 0px;
  opacity: 0;
}

.info-page-content.open {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  opacity: 1;
  -webkit-transition: all 1000ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -moz-transition: all 1000ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
      -ms-transition: all 1000ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -o-transition: all 1000ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
          transition: all 1000ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}

.info-page-content > div {
  width: 60%
}

.upload-file {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  width: 100%;
}

.profile-wrap {
  width: 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}
.hide {
  display: none !important;
}
.show {
  display: block !important;
}
.invisible {
  visibility: hidden;
}
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.affix {
  position: fixed;
}

.card-cell {
  width: 100%;
}

@media (min-width: 75em) {
  .card-cell {
    width: calc(100% / 4 * 1);
  }
}
@media (min-width: 64em) {
  .card-cell {
    width: calc(100% / 3);
  }
}
@media (min-width: 48em) {
  .card-cell {
    width: 50%;
  }
}
.infinite-container {
  margin-left: -12px;
  margin-right: -12px;
}

/* 通知的进入退出动画 */
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
  animation-duration: .3s;
  animation-fill-mode: both;
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInUp {
  animation-name: zoomInUp;
  animation-duration: .3s;
  animation-fill-mode: both;
}

.chat-content:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 0;
  border-color: #00BCD4 transparent transparent #00BCD4;
  position: absolute;
  top: 0;
  right: -9px;
}

.chat-content-normal:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 12px 0;
  border-color: transparent #EEEEEE transparent transparent;
  position: absolute;
  top: 0;
  left: -9px;
}